<template>
  <a-modal
    title="选择角色"
    style="top: 20px;"
    :width="600"
    v-model="visible"
    :maskClosable="false"
    @ok="handleSubmit"
  >
    <s-table
      size="default"
      ref="table"
      rowKey="roleCode"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      :columns="columns"
      :data="loadData"
    >
    </s-table>
  </a-modal>
</template>
<script>
import { STable } from '@/components'
import { getRoleList } from '@/api/system'
export default {
  components: {
    STable
  },
   data () {
    return {
      visible: false,
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getRoleList(Object.assign(parameter))
      },
      selectedRowKeys: [],
      selectedRows: [],
      // 表头
      columns: [
        {
          title: '角色名称',
          dataIndex: 'roleName'
        },
        {
          title: '角色代码',
          dataIndex: 'roleCode'
        },
        {
          title: '所属机构',
          dataIndex: 'branchName'
        }
      ]
    }
  },
  methods: {
     onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    open (roleCodes, roles) {
      this.visible = true
      if (roleCodes) {
        this.selectedRowKeys = roleCodes
        this.selectedRows = roles
      }
      this.$nextTick(() => {
        this.$refs.table.refresh()
      })
    },
    handleSubmit () {
      this.visible = false
      this.$emit('ok', this.selectedRows)
      this.$refs.table.clearSelected()
    }
  }
}
</script>
